<template>
    <div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="用户名">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="form.password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button @click="reSet">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { reactive } from 'vue'
export default {
    setup() {
        const form = reactive({
            name: '',
            password: ''
        })
        const onSubmit = () => {
            console.log('submit!', form)
        }
        return {
            form,
            onSubmit
        }
    },
    name: 'index',
    components: {
        
    },
    methods: {
        onSubmit() {
            this.$router.push({path: '/index', query: {'name': this.form.name, 'password': this.form.password}});
        },
        reSet() {
            this.form.name = ''
            this.form.password = ''
        }
    }
};
</script>
<style scoped>

</style>